import * as echarts from "echarts";
import { useEffect, useRef } from "react";
import classNames from "classnames";
// 此处的 china 获取的是 定义的 中国地图的 数据 json
import { china } from "../../utils/api";

const Index = () => {
  // 获取渲染区域的DOM元素 【ref】
  let myChartsbBox = useRef(null);
  // 在页面加载的初期，此时获取的只是一个 null的结果，我们后续会再 useEffect 中得到 真实的DOM结果值，其值就是保存在 current 的上
  // ref 除了可以用于DOM元素的获取以外，通过 useRef 我们可以保存数据【缓存数据】【不会随组件的更新而更新数据】

  let myChart = null; // 存储被 echarts 初始化完成的对象【可以被 echarts 理解的 DOM对象】

  // 存储的我们点击过的地图数据信息
  let mapArr = [
    {
      adcode: 100000,
      name: "中国",
    },
  ];

  // 定义对应的方法 setCharts ，后续再 useEffect 出发 渲染 echarts 的方法 【函数中传递两个参数：adcode name】
  const setCharts = (adcode, name) => {
    china(adcode).then((res) => {
      console.log(res, "地图数据");
      // 首先对 myChartsbBox 执行 echarts 的初始化 init
      myChart = echarts.init(myChartsbBox.current);
      // 在ECharts中，echarts.registerMap是一个用于注册自定义地图数据的方法。通过echarts.registerMap方法，可以将自定义的地图数据注册到ECharts中，以便在地图系列中使用这些自定义地图数据进行展示。
      // 注册地图数据：使用echarts.registerMap方法可以注册自定义的地图数据。该方法接受两个参数，第一个参数是地图的名称，第二个参数是地图的数据。
      echarts.registerMap(name, res.data);
      // 定义数据的 option
      let option = {
        // tooltip配置项：可以通过配置tooltip对象的属性来自定义tooltip的显示效果，包括触发方式、内容格式、样式等。
        // 触发类型：tooltip的触发方式可以通过trigger属性来设置，常见的触发类型包括：
        // 'item'：数据项触发，鼠标悬停在数据项上时显示tooltip。
        // 'axis'：坐标轴触发，鼠标悬停在坐标轴上时显示tooltip。
        // 自定义内容：可以通过formatter属性来自定义tooltip的内容格式，使用占位符来显示数据项的名称和数值等信息。
        tooltip: {
          trigger: "item", // 触发类型，可选值有'item'（数据项触发）和'axis'（坐标轴触发）等
          formatter: "{b}<br/>{c} (p / km2)", // 格式化tooltip内容，{b}表示数据项名称，{c}表示数据项值
        },

        // 在ECharts中，visualMap（视觉映射组件）是一种用于展示数据范围和数值的组件，通常用于展示数据的颜色深浅或大小等视觉特征。通过visualMap可以直观地展示数据的分布情况，帮助用户更好地理解数据。
        // visualMap: {
        //   min: 8,  // 最小值
        //   max: 50, // 最大值
        //   text: ["High", "Low"],  // 设置visualMap的文本标签内容，例如['High', 'Low']
        //   calculable: false,  // 是否显示拖拽用的手柄
        //   inRange: {
        //     color: ["lightskyblue", "yellow", "orangered"],  // 定义颜色范围
        //   },
        // },
        // 地图散点
        // geo 地理坐标系组件
        geo: {
          // map  使用 registerMap 注册的地图名称
          map: name,
          // geo.label  图形上的文本标签
          label: {
            // geo. emphasis  高亮状态下的多边形和标签样式。
            emphasis: {
              show: false,
            },
          },
          // roam: true, // 启用地图的漫游和缩放功能
          // zoom: 1.2, // 初始缩放比例
          // center: [104.114129, 37.550339] // 初始中心位置经纬度
        },
        // 在 ECharts 中，series 是用于配置图表系列（series）的一个重要属性。series 属性用于定义图表中的各个系列，例如折线图、柱状图、饼图等。通过配置 series 属性，可以实现对图表中不同系列的样式、数据等进行个性化设置。
        series: [
          // {
          //   // series-effectScatter    带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出
          //   type: "effectScatter",
          //   // 坐标系
          //   coordinateSystem: "geo", //使用地理坐标系geo
          //   // 散点坐标
          //   data: res.data.features.map((item) => {
          //     return item.properties.center
          //   }),
          // },
          {
            name: name,
            type: "map",
            // map的name与 echarts.registerMap中的name相同
            map: name,
            label: {
              show: true,
            },
            // 接口中的数据替换原本的 data
            data: res.data.features.map((item) => {
              return {
                adcode: item.properties.adcode,
                name: item.properties.name,
                value: item.properties.childrenNum,
              };
            }),
            // 设置地图的颜色
            itemStyle: {
              areaColor: "lightskyblue", // 设置地图区域的背景颜色
              // 其他样式设置
            },
            // 自定义名称映射
            nameMap: {
              "Central and Western": "中西区",
              Eastern: "东区",
              Islands: "离岛",
              "Kowloon City": "九龙城",
              "Kwai Tsing": "葵青",
              "Kwun Tong": "观塘",
              North: "北区",
              "Sai Kung": "西贡",
              "Sha Tin": "沙田",
              "Sham Shui Po": "深水埗",
              Southern: "南区",
              "Tai Po": "大埔",
              "Tsuen Wan": "荃湾",
              "Tuen Mun": "屯门",
              "Wan Chai": "湾仔",
              "Wong Tai Sin": "黄大仙",
              "Yau Tsim Mong": "油尖旺",
              "Yuen Long": "元朗",
            },
          },
        ],
      };
      // 渲染地图
      myChart.setOption(option);

      // 取消点击和右击的事件
      // 取消点击事件
      myChart.off("click", onClick);
      // 取消右击事件
      myChart.off("contextmenu", Contextmenu);

      // 点击下钻【地图下钻的操作】
      myChart.on("click", onClick);
      // 右击返回上一级
      myChart.getZr().on("contextmenu", Contextmenu);
    });
  };

  // 对应的地图下钻的功能
  const onClick = (e) => {
    // 将点击的 值存储到 mapArr 中
    mapArr.push({
      adcode: e.data.adcode,
      name: e.data.name,
    });
    // console.log(e,'点击的值'); // 通过点点击的操作 获取 对应的 adcode 和 name 就可以完成相应的操作
    // 递归的形式实现，重新将 adcode 的值 和 name 的名称 作为参数 传递 到 setCharts 中即可
    setCharts(e.data.adcode, e.data.name);
  };

  // 鼠标右击返回上一级地图
  const Contextmenu = (e) => {
    // console.log(e,'右击的值');
    e.event.preventDefault(); // 取消默认右击事件
    if (mapArr.length > 1) {
      // 删除 mapArr 中的最后一个
      mapArr.pop();
      // 然后从已有的数组中提取最后一个元素 调用 setCharts 方法 完成相应的操作
      setCharts(
        mapArr[mapArr.length - 1].adcode,
        mapArr[mapArr.length - 1].name
      );
    }
  };

  // 在生命周期中给 setCharts 函数传值 【生命周期的第一阶段就执行操作】
  useEffect(() => {
    setCharts(100000, "中国");
  }, []);

  return (
    <div className="wisdomBody">
      <div className="wisdomBody_left"></div>
      <div className="wisdomBody_right"></div>
      <div className={classNames("wisdomBody_center", "chinaMapCenter")}>
        <div
          style={{ width: "900px", height: "900px" }}
          ref={myChartsbBox}
        ></div>
      </div>
    </div>
  );
};
export default Index;
